<template>
  <div id='userCenter'>
    <div class="usercenter">
      <com-head :opacity='0'>个人中心</com-head>
      <div class="navimg"  @click="shownav"><img class="img" src="../assets/image/navall.png"></div>
      <div class="renwu" v-if="(huiyuan+my+other)>0">未完成任务：{{huiyuan+my+other}}条</div>
      <div class="balance">
          <p>金币余额</p>
          <p>{{balance}}</p>
      </div>
      <div class="information">
          <div class="item"><span>账号注册时间</span><input type="text" v-model="regtime" readonly></div>
          <div class="item"><span>上次登录时间</span><input type="text" v-model="logintime" readonly></div>
          <div class="item"><span>我的账号</span><input type="text" v-model="name" readonly></div>
          <div class="item"><span>手机号</span><input type="text" v-model="phone" placeholder="设置手机号"></div>
          <div class="item staritem"><span>我的等级</span><div><i class="iconfont icon-star" v-for="(item,index) in starnum" :key="index"></i></div></div>
          <div class="item"><span>银行卡号</span><input type="text" v-model="cardnum" placeholder="请输入银行卡号"></div>
          <div class="item"><span>开户行</span><input type="text" v-model="bank" placeholder="请输入开户行及详细地址"></div>
          <div class="item"><span>持卡人</span><input type="text" v-model="bankname" placeholder="请输入持卡人姓名"></div>
          <div class="item"><span>二级密码</span><input type="password" v-model="safepsw" placeholder="请输入二级密码"></div>
          <!-- <div class="item itemphone" v-if="active"><span>手机号</span><input type="text" v-model="phone" :placeholder="phone"></div> -->
          <div class="item item1"><span>微信/支付宝收款码</span></div>
          <div class="uploadimg">
            <div class="upload" @click="portrait1">
            <div class="yulan" v-if="img1"><img :src="`http://${img1}`"></div>
              <input class="imginp" ref="portrait1" name="imgLocal" id="imgLocal" type='file' accept="image/*" @change="shangchuan1"/>
              <div class="box">
                <i class="iconfont icon-tianjia"  v-if="!img1"></i>
                <span>微信收款码</span>
              </div>
            </div>
            <div class="upload" @click="portrait2">
            <div class="yulan" v-if="img2"><img :src="`http://${img2}`"></div>
              <input class="imginp" ref="portrait2" name="imgLocal" id="imgLocal" type='file' accept="image/*" @change="shangchuan2"/>
              <div class="box">
                <i class="iconfont icon-tianjia"  v-if="!img2"></i>
                <span>支付宝收款码</span>
              </div>
            </div>
        </div>
        <div class="alertmima"  v-if="mask1">
          <p>请输入二级密码</p>
          <input type="password" v-model="safepsw" placeholder="请输入二级密码">
          <button @click="surepsw">确定</button>
        </div>
        <div class="mask1" v-if="mask1"  @click="mask1=false"></div>
        <!-- <div class="bianji" v-if="!active" @click="active=true"><span>编辑资料</span><i class="iconfont icon-xiugai"></i></div> -->
        <com-button :click="xiugai">保存</com-button>
      </div>
    </div>
    <div class="mask"></div>
  </div>
</template>

<script>
export default {
  name: "userCenter",
  data() {
    return {
      mask1: false,
      safepsw: '',
      huiyuan: "",
      my: "",
      other: "",
      show: false,
      // active: false,
      balance: "",
      regtime: "",
      logintime: "",
      name: "",
      phone: "",
      cardnum: "",
      bank: "",
      bankname: "",
      safepsw: "",
      grade: "",
      starnum: [],
      img1: "", //微信
      img2: "",
      imgid1: "", //微信
      imgid2: ""
    };
  },

  computed: {},
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.mask1 = true;
    });
  },
  created() {},

  mounted() {
    this.loading1();
  },

  methods: {
    surepsw () {
      if (!this.safepsw) {
        this.$bus.$emit("toast", "请输入二级密码");
      } else {
        this.axios.post("apiindex/sale_code", {
          token: this.token(),
          sale_code: this.safepsw,
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.mask1 = false;
            this.loading();
            this.$bus.$emit("toast", data.data);            
          } else if (data.code === "204") {
            this.$router.push("clause");            
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      }
    },
    loading() {
      this.axios
        .post("apireg/usermessage", {
          token: this.token()
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.balance = data.data.regcur;
            this.name = data.data.user_num;
            this.phone = data.data.phone;
            this.img1 = data.data.wechat;
            this.img2 = data.data.alipay;
            this.grade = data.data.rank;
            this.regtime = data.data.create_time;
            this.logintime = data.data.last_logintime;
            this.cardnum = data.data.bank_account;
            this.bank = data.data.open_bank;
            this.bankname = data.data.bank_name;
            for (let i = 0; i < this.grade; i++) {
              this.starnum.push(1);
            }
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    loading1() {
      this.axios
        .post("apireg/home_page", {
          token: this.token()
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.huiyuan = data.data.huiyuan;
            this.my = data.data.my;
            this.other = data.data.other;
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    xiugai() {
      let regTel = /^(1[3-9])\d{9}$/;
      if (!this.phone) {
        this.$bus.$emit("toast", "手机号不能为空");
      } else if (!regTel.test(this.phone)) {
        this.$bus.$emit("toast", "手机号码不合法");
      } else {
        this.axios
          .post("apireg/upmessage", {
            token: this.token(),
            phone: this.phone,
            wechat: this.imgid1,
            alipay: this.imgid2,
            bank_account: this.cardnum,
            open_bank: this.bank,
            bank_name: this.bankname,
            sale_code: this.safepsw
          })
          .then(({ data }) => {
            
            if (data.code === "200") {
              // this.active = false;
              this.$bus.$emit("toast", data.data);
            } else if (data.code === "204") {
              this.$bus.$emit("toast", data.data);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    // 头像单击事件
    portrait1() {
      if (!this.img1) {
        //上传图片
        this.$refs.portrait1.click();
      } else {
        //删除图片
        this.$bus.$emit("comAlert", {
          title: "操作提示",
          info: "你确定要更换收款码",
          button: [
            {
              text: "确定",
              callback: () => {
                this.deleteimg(2);
              }
            },
            {
              text: "取消",
              callback: () => {}
            }
          ]
        });
      }
    },
    deleteimg(typeimg) {
      this.axios
        .post("apireg/delpay", {
          token: this.token(),
          type: typeimg
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.$bus.$emit("toast", data.data);
            typeimg == 1 ? (this.img2 = "") : (this.img1 = "");
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    shangchuan1(e) {
      var self = this;
      let file = e.target.files[0]; // 上传照片
      /* eslint-disable no-undef */
      let formData = new FormData(); // 创建form对象
      formData.append("imgurl", file); // 通过append向form对象添加数据
      // formData.append("token", this.token()); // 添加form表单中其他数据
      console.log(formData.get("imgurl")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        emulateJSON: true,
        withCredentials: false,
        headers: { "Content-Type": "multipart/form-data" }
      };
      this.$axios
        .post(
          "http://kuaibb.cadhx.com/index.php/index/apiupload/doupload",
          formData,
          config
        )
        .then(({ data }) => {
          if (data.code === "200") {
            
            this.img1 = data.img;
            this.imgid1 = data.imgid;
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    portrait2() {
      if (!this.img2) {
        //上传图片
        this.$refs.portrait2.click();
      } else {
        //删除图片
        this.$bus.$emit("comAlert", {
          title: "操作提示",
          info: "你确定要更换收款码",
          button: [
            {
              text: "确定",
              callback: () => {
                this.deleteimg(1);
              }
            },
            {
              text: "取消",
              callback: () => {}
            }
          ]
        });
      }
    },
    shangchuan2(e) {
      var self = this;
      let file = e.target.files[0]; // 上传照片
      /* eslint-disable no-undef */
      let formData = new FormData(); // 创建form对象
      formData.append("imgurl", file); // 通过append向form对象添加数据
      // formData.append("token", this.token()); // 添加form表单中其他数据
      console.log(formData.get("imgurl")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        emulateJSON: true,
        withCredentials: false,
        headers: { "Content-Type": "multipart/form-data" }
      };
      this.$axios
        .post(
          "http://kuaibb.cadhx.com/index.php/index/apiupload/doupload",
          formData,
          config
        )
        .then(({ data }) => {
          if (data.code === "200") {
            
            this.img2 = data.img;
            this.imgid2 = data.imgid;
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    shownav() {
      this.$bus.$emit("navlist");
    }
  }
};
</script>
<style lang='scss'>
#userCenter {
  background-color: rgb(246, 246, 246);
  padding: 80px 32px;
  box-sizing: border-box;
  .com_button {
    margin-top: 200px;
    width: 510px;
  }
  .icon-fanhui1 {
    display: none;
  }
  .usercenter {
    // width: 750px;
    .navimg {
      width: 140px;
      height: 80px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      img {
        display: block;
        margin-left: 42px;
        margin-top: 25px;
        width: 43px;
        height: 33px;
      }
    }
    .balance {
      margin: 30px auto;
      padding: 60px 0;
      box-sizing: border-box;
      width: 686px;
      height: 260px;
      background: url(../assets/image/iconbg.png) no-repeat;
      background-size: cover;
      border-radius: 10px;
      text-align: center;
      p:nth-of-type(1) {
        font-size: 28px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 60px;
      }
      p:nth-of-type(2) {
        font-size: 56px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        line-height: 80px;
      }
    }
    .information {
      width: 686px;
      margin-bottom: 30px;
      padding-bottom: 40px;
      background: rgba(255, 255, 255, 1);
      border-radius: 10px;
      .item {
        margin: 0px 30px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1Px solid rgba(238, 238, 238, 1);
        line-height: 102px;
        span {
          width: 200px;
          text-align: left;
        }
        input {
          width: 450px;
          // height: 52px;
          text-align: right;
          font-size: 30px;
          margin-right: 0;
          color: #054a5e;
        }
        input::-webkit-input-placeholder {
          /* WebKit browsers */
          color: #999;
        }
        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #999;
        }

        input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #999;
        }

        input:-ms-input-placeholder {
          /* Internet Explorer 10+ */
          color: #999;
        }
      }
      .itemphone input {
        color: #c6d9de;
      }
      .staritem {
        .icon-star {
          font-size: 40px;
          color: rgb(255, 187, 0);
        }
      }
      .item1 {
        border-bottom: none;
        span {
          width: 500px;
        }
      }
      .uploadimg {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .upload {
          width: 240px;
          height: 240px;
          margin-top: 20px;
          border-radius: 6px;
          border: 1Px dashed #0a89ac;
          .yulan {
            width: 238px;
            height: 238px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 100%;
              height: 100%;
            }
          }
          input {
            width: 10px;
            opacity: 0;
            filter: alpha(opacity=0);
          }
          .box {
            margin: 0 auto;

            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            span {
              font-size: 24px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(10, 137, 172, 1);
              line-height: 80px;
            }
            .iconfont {
              font-size: 65px;
              color: #0a89ac;
            }
          }
        }
      }
    }
  }
  // .usernav {
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   width: 100vw;
  //   height: 100vh;
  //   z-index: 100;
  //   background: rgba(0, 0, 0, 0.6);
  //   .nav {
  //     width: 550px;
  //     height: 100%;
  //     padding: 42px 32px;
  //     box-sizing: border-box;
  //     background: rgba(255, 255, 255, 1);
  //     p:nth-of-type(1) {
  //       margin-bottom: 62px;
  //       font-size: 36px;
  //       text-align: left;
  //       font-family: PingFangSC-Semibold;
  //       font-weight: 600;
  //       color: rgba(10, 137, 172, 1);
  //       line-height: 50px;
  //     }
  //     .box {
  //       display: flex;
  //       justify-content: flex-start;
  //       align-items: center;
  //       .left {
  //         width: 37px;
  //         height: 40px;
  //         img {
  //           width: 100%;
  //         }
  //       }
  //       .right {
  //         width: 426px;
  //         margin-left: 20px;
  //         border-bottom: 1Px solid #0a89ac;
  //         span {
  //           font-size: 32px;
  //           font-family: PingFangSC-Regular;
  //           font-weight: 400;
  //           color: rgba(10, 137, 172, 1);
  //           line-height: 102px;
  //         }
  //         span:nth-of-type(2) {
  //           display: inline-block;
  //           vertical-align: middle;
  //           margin-left: 24px;
  //           width: 32px;
  //           height: 32px;
  //           line-height: 32px;
  //           text-align: center;
  //           border-radius: 16px;
  //           background: rgba(184, 25, 25, 1);
  //           font-size: 22px;
  //           color: rgba(255, 255, 255, 1);
  //         }
  //       }
  //     }
  //   }
  // }
  .bianji {
    margin-top: 168px;
    text-align: center;
    span {
      width: 122px;
      height: 42px;
      font-size: 30px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(5, 74, 94, 1);
      line-height: 50px;
      border-bottom: 1Px solid #054a5e;
    }
    .icon-xiugai {
      margin-left: 20px;
      // margin-top: 20px;
      font-size: 30px;
      color: rgba(5, 74, 94, 1);
      // line-height:60px;
    }
  }
  .renwu {
    background: red;
    margin-top: 20px;
    text-align: center;
    color: #fff;
    font-size: 35px;
  }
  .alertmima {
      width: 590px;
      height: 350px;
      box-sizing: border-box;
      padding: 20px 40px;
      background: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 20%;
      left: 80px;
      text-align: center;
      z-index: 100;
      // background-color: red;
      p{
        line-height: 90px;
      }
      input{
        border: 1Px solid #ddd;
        padding-left: 10px;
        box-sizing: border-box;
        width: 90%;
        height: 80px;
        margin-bottom: 50px;
      }
    button {
          width: 400px;
          margin: 0 auto;
          height: 78px;
          line-height: 78px;
          color: #fff;
          font-size: 28px;
          border-radius: 39px;
          background: #054a5e;
          // @include bgChangeStyle();
        }
    }
    .mask1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
    }
}
</style>